<template>
	<div>
		<!-- <div>首页</div> -->
		<!-- 直播区 -->
		<live :liveCourses="liveCourses" :liveTotal="liveTotal"></live>
		<!-- 视频区 -->
		<videoShow style="margin-top: 20px;" :videos="videos" :videoTotal="videoTotal"></videoShow>
		<!-- 回到顶部 -->
		<BackTop></BackTop>
	</div>

</template>

<script>
	import axios from 'axios';
	import Live from "./components/Live/Live.vue"
	import VideoShow from "./components/Video/Video.vue"
	import BackTop from "./components/BackTop/BackTop.vue"
	export default {
		name: 'Index',
		data() {
			return {
				liveCourses: [],
				videos:[],
				liveTotal: 0,
				videoTotal: 0,
				loading: true,
				dataText: "  ",
				oldCName: ""
			}
		},
		components: {
			Live,
			VideoShow,
			BackTop
		},
		methods: {
			// 首页展示数据-->有查询展示
			selectLiveByCNameLimit(cName) {
				// 将当前搜索的课程名存入session
				sessionStorage.setItem("cName", this.$route.params.cName)
				axios.get(this.$global_msg.liveRoute + '/liveCourse/selectByCNameLimit', {
						params: {
							"cName": this.$route.params.cName,
						}
					})
					.then((res) => {
						// console.log(res)
						this.liveCourses = res.data.data
						this.liveTotal = res.data.count
						this.changeLoadingType();
					}).catch((response) => {
						console.log(response);
						this.changeLoadingType();
					})
			},
			selectVideoByCNameLimit(cName) {
				axios.get(this.$global_msg.videoRoute + '/video/selectByCNameLimit', {
						params: {
							"cName": this.$route.params.cName,
						}
					})
					.then((res) => {
						// console.log(res)
						this.videos = res.data.data
						this.videoTotal = res.data.count
						this.changeLoadingType();
					}).catch((response) => {
						console.log(response);
						this.changeLoadingType();
					})
			},
			changeLoadingType() {
				this.dataText = "暂无数据"
				this.loading = false
			}
		},
		watch: {
			// 侦听器监听路由中的数据是否改变，改变的话则调用方法
			'$route.params.cName':function(now, old) {
				if(now != old) {
					// 查询直播区数据
					this.selectLiveByCNameLimit()
					// 查询视频区数据
					this.selectVideoByCNameLimit()
				} else{
					console.log("数据没变")
				}
			}
		},
		mounted() {
			// 查询直播区数据
			this.selectLiveByCNameLimit()
			// 查询视频区数据
			this.selectVideoByCNameLimit()
			
			// console.log(this.$route.params.cName)
		}
	};
</script>

<style>
	div {
		color: black;
	}
</style>
